<template>
  <div class="content" v-loading="loading">
    <!-- 左侧 -->
    <div class="left-module-box">
      <div class="left-logo-box">
        <!-- <img src="@/assets/image/Login/icon-left-logo.png" alt /> -->
        <p></p>
      </div>
      <div class="left-bottom-box">
        <!-- <div class="left-bottom-list">
          <p>开放平台</p>
          <p>公共资源</p>
          <p>意见反馈</p>
          <p>帮助中心</p>
        </div>-->
        <div class="left-bottom-hint">
          <p>
            本站由成都市规划和自然资源信息中心维护 服务热线：61884124 /
            办公地址：成都市锦绣西路69号13-18楼
          </p>
          <p>© 成都市规划和自然资源局 版权所有</p>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right-module-box">
      <div class="center-module">
        <div class="top-logo-box">
          <!-- <img src="@/assets/image/Login/icon-right-logo.png" alt /> -->
          <div>登录</div>
          <div class="title">欢迎登录成都市规划和自然资源办公门户</div>
        </div>
        <div class="form-box">
          <!-- <div style="width: 100%; padding-bottom: 20px">
            <el-select
              v-model="loginType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="账户登陆" value="0"></el-option>
              <el-option label="验证码登陆" value="1"></el-option>
            </el-select>
          </div>-->
          <!-- 顶部选项卡 -->
          <div class="module-title">
            <p
              @click="loginType = 0"
              :style="{
                color: loginType == 0 ? '#2F6CDF' : '#333333',
                'border-color': loginType == 0 ? '#2F6CDF' : 'transparent',
              }"
            >账户登录</p>
            <p
              @click="loginType = 1"
              :style="{
                color: loginType == 1 ? '#2F6CDF' : '#333333',
                'border-color': loginType == 1 ? '#2F6CDF' : 'transparent',
              }"
            >验证码登录</p>
          </div>
          <div style="width: 100%" v-show="loginType == '0'">
            <el-form ref="login" :model="login" :rules="rules" label-width="80px">
              <el-form-item prop="name">
                <el-input
                  v-model="login.name"
                  placeholder="用户名"
                  @keyup.enter.native="passworldLogin('login')"
                ></el-input>
              </el-form-item>
              <el-form-item prop="passworld">
                <el-input
                  v-model="login.passworld"
                  placeholder="密码"
                  type="password"
                  @keyup.enter.native="passworldLogin('login')"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div style="width: 100%" v-show="loginType == '1'">
            <el-form ref="loginAuthCode" :model="loginAuthCode" :rules="rules" label-width="80px">
              <el-form-item prop="phone">
                <el-input
                  v-model="loginAuthCode.phone"
                  placeholder="电话号码"
                  @keyup.enter.native="phoneLogin('loginAuthCode')"
                ></el-input>
              </el-form-item>
              <div
                style="
                  display: flex;
                  align: center;
                  justify-content: space-between;
                "
              >
                <div style="width: 60%">
                  <el-form-item prop="authCode">
                    <el-input
                      v-model="loginAuthCode.authCode"
                      placeholder="验证码"
                      @keyup.enter.native="phoneLogin('loginAuthCode')"
                    ></el-input>
                  </el-form-item>
                </div>
                <div style="width: 39%" @click="sendCode('loginAuthCode')">
                  <authCodeBtn ref="authBtn" @sendCode="sendCodeBack"></authCodeBtn>
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <div class="bottom-do-box">
          <div>
            <el-checkbox>下次自动登录</el-checkbox>
          </div>
          <!-- <p>忘记密码</p> -->
        </div>
        <div>
          <div class="login-btn" @click="passworldLogin('login')" v-if="loginType == '0'">
            <p>登录</p>
          </div>
          <div class="login-btn" @click="phoneLogin('loginAuthCode')" v-if="loginType == '1'">
            <p>登录</p>
          </div>
        </div>
      </div>
      <p class="hint-box">
        建议使用 360 浏览器
        <span @click="download">点击下载</span>
      </p>
    </div>
  </div>
</template>
<script>
import authCodeBtn from "@/components/ui/authCodeBtn.vue";
export default {
  components: { authCodeBtn },
  data() {
    return {
      tabState: 1,
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        passworld: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
        authCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      login: {
        name: "",
        passworld: ""
      },
      loginAuthCode: {
        phone: "",
        authCode: ""
      },
      loading: false,
      loginType: "0"
    };
  },
  methods: {
    passworldLogin(formName) {
      var that = this;

      //页面表单验证
      this.$refs[formName].validate(valid => {
        if (valid) {
          //   alert("submit!");
          that.loading = true;

          //验证通过进行登陆请求
          that.$.ajax({
            url: that.$API.ajaxPath,
            type: "post",
            data: {
              interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
              methodName: "userLogin",
              args: [
                that.login.name.toUpperCase(),
                that.$md5(that.login.passworld),
                ""
              ]
            },
            dataType: "json",
            success: res => {
              // console.log(res);
              that.loading = false;
              if (res.status == "0") {
                console.log(JSON.parse(res.result));
                let userMsg = JSON.parse(res.result);

                let USER_ID = userMsg.EMPLOYEE.EMPLOYEE_ID;

                let TOKEN = userMsg.tokenV2;

                localStorage.setItem("USER_ID", USER_ID);

                localStorage.setItem("TOKEN", TOKEN);

                that.$router.push("/home");
              } else {
                this.$message({
                  message: res.message,
                  type: "warning"
                });
              }
            },
            error: xhr => {
              console.log(xhr);
              that.loading = false;
            }
          });
        } else {
          // 表单验证失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    sendCode() {
      let that = this;

      if (this.$refs.authBtn._data.countDown < 180) {
        return;
      }

      if (this.login.phone == "") {
        that.$message.error("请输入手机号码");
        return;
      }

      //验证通过发送验证码
      this.$refs.authBtn.sendCode();
    },
    sendCodeBack(val) {
      let that = this;

      //发送验证码
      if (val) {
        that.$.ajax({
          url: that.$API.ajaxPath,
          type: "post",
          data: {
            interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
            methodName: "getLoginCode",
            args: [that.loginAuthCode.phone]
          },
          dataType: "json",
          success: res => {
            // console.log(res);

            if (res.result == "手机号未绑定用户!") {
              this.$message({
                message: "手机号未绑定用户!",
                type: "warning"
              });
            }
          },
          error: xhr => {
            // console.log(xhr);
          }
        });
      }
    },
    //验证码登陆
    phoneLogin(formName) {
      var that = this;

      //页面表单验证
      this.$refs[formName].validate(valid => {
        if (valid) {
          //   alert("submit!");
          that.loading = true;

          //验证通过进行登陆请求
          that.$.ajax({
            url: that.$API.ajaxPath,
            type: "post",
            data: {
              interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
              methodName: "telCodeLogin",
              args: [that.loginAuthCode.phone, that.loginAuthCode.authCode]
            },
            dataType: "json",
            success: res => {
              // console.log(res);

              if (res.status == "0") {
                if (res.result == "验证码错误!") {
                  this.$message({
                    message: res.result,
                    type: "warning"
                  });
                } else {
                  let resultData = JSON.parse(res.result);

                  let userMsg = JSON.parse(resultData.result);

                  let USER_ID = userMsg.EMPLOYEE.EMPLOYEE_ID;

                  let TOKEN = userMsg.tokenV2;

                  localStorage.setItem("USER_ID", USER_ID);

                  localStorage.setItem("TOKEN", TOKEN);

                  console.log(userMsg);

                  that.$router.push("/home");
                }
              }

              that.loading = false;
            },
            error: xhr => {
              // console.log(xhr);
              that.loading = false;
            }
          });
        } else {
          // 表单验证失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    download() {
      window.location.href =
        "http://172.18.2.232:8888/group1/M00/0A/79/rBICi2CaSjKAeeWSBNArcBtgRuw328.exe";
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style scoped lang="less">
.content {
  display: flex;
  height: 100vh;

  .left-module-box {
    width: calc(100% - 515px);
    height: 100%;
    background-image: url("../assets/image/Login/login-bg.jpg");
    background-size: 100% 100%;
    position: relative;
  }

  .left-logo-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    img {
      width: 55px;
      height: 55px;
    }

    p {
      color: rgba(255, 255, 255, 1);
      font-size: 40px;
      font-weight: bold;
      margin-left: 10px;
    }
  }

  .left-bottom-box {
    width: 100%;
    position: absolute;
    bottom: 20px;
  }

  .left-bottom-list {
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;

    p {
      color: #ffffff;
      cursor: pointer;
    }
  }

  .left-bottom-hint {
    font-size: 12px;
    color: rgba(184, 184, 184, 1);
    text-align: center;
  }

  // 右侧
  .right-module-box {
    width: 515px;
    height: 100%;
    box-sizing: border-box;
    padding: 0 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .center-module {
    width: 100%;
    height: 70%;
  }

  .top-logo-box {
    text-align: center;
    padding-bottom: 50px;

    img {
      width: 50px;
      height: 50px;
    }

    div {
      font-size: 36px;
      font-weight: bold;
      text-align: left;
    }

    .title {
      font-size: 18px;
      color: #888888;
      font-weight: normal;
      margin-top: 9px;
    }
  }

  .right-module-box /deep/ .el-form-item__content {
    margin-left: 0 !important;
  }

  .bottom-do-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
  }

  .login-btn {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(42, 130, 228, 1);
    color: #ffffff;
  }

  .hint-box {
    font-size: 14px;
    color: rgba(174, 174, 174, 1);
    text-align: center;
    position: absolute;
    bottom: 20px;
    span {
      color: #2a82e4;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

.module-title {
  text-align: center;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 4%;

  p {
    width: 50%;
    font-size: 20px;
    color: #333333;
    border-bottom: 3px transparent solid;
    padding-bottom: 1%;
    font-weight: bold;
  }
}
</style>
